<keira-top-bar
  [selected]="handlerService.selected"
  [selectedName]="handlerService.selectedName"
  [isNew]="handlerService.isNew"
></keira-top-bar>

<div class="container-fluid">
  @if (editorService.loading) {
    <span [translate]="'LOADING'"></span>
  }

  @if (editorService.form && !!editorService.loadedEntityId && !editorService.loading) {
    <div>
      <div class="content-block">
        <keira-query-output [docUrl]="docUrl" [editorService]="editorService" (executeQuery)="save($event)"></keira-query-output>
      </div>
      <div class="content-block">
        <form [formGroup]="editorService.form" class="form-group edit-form">
          <div class="row">
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="CreatureID">CreatureID</label>
              <input [formControlName]="'CreatureID'" id="CreatureID" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="ItemID1">
                <keira-icon [itemId]="editorService.form.controls.ItemID1.value"></keira-icon>
                ItemID1
              </label>
              <keira-item-selector-btn
                [control]="editorService.form.controls.ItemID1"
                [disabled]="editorService.form.controls.ItemID1.disabled"
                [config]="{ name: 'ItemID1' }"
              ></keira-item-selector-btn>
              <input [formControlName]="'ItemID1'" id="ItemID1" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="ItemID2">
                <keira-icon [itemId]="editorService.form.controls.ItemID2.value"></keira-icon>
                ItemID2
              </label>
              <keira-item-selector-btn
                [control]="editorService.form.controls.ItemID2"
                [disabled]="editorService.form.controls.ItemID2.disabled"
                [config]="{ name: 'ItemID2' }"
              ></keira-item-selector-btn>
              <input [formControlName]="'ItemID2'" id="ItemID2" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="ItemID3">
                <keira-icon [itemId]="editorService.form.controls.ItemID3.value"></keira-icon>
                ItemID3
              </label>
              <keira-item-selector-btn
                [control]="editorService.form.controls.ItemID3"
                [disabled]="editorService.form.controls.ItemID3.disabled"
                [config]="{ name: 'ItemID3' }"
              ></keira-item-selector-btn>
              <input [formControlName]="'ItemID3'" id="ItemID3" type="number" class="form-control form-control-sm" />
            </div>
          </div>
        </form>
      </div>
    </div>
  }
</div>
